<template>
  <div class="middle">
    <img src="@/assets/img/middlebdg.png" />
    <div class="middle_chinese" @click="goCourse('9')"></div>
    <div class="middle_math" @click="goCourse('8')"></div>
    <div class="middle_science" @click="goCourse('12')"></div>
    <div class="high_chinese" @click="goCourse('11')"></div>
    <div class="high_math" @click="goCourse('10')"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
     
    };
  },

  methods: {
    goCourse(type) {
      console.log("列表类型 === " + type);
      this.$router.push({
        path: "/course",
        query: {
          type: type,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.middle {
  position: relative;
  .middle_chinese {
    position: absolute;
    left: 0.8rem;
    top: 9.8rem;
    width: 2.5rem;
    height: 1.1rem;
  }

  .middle_math {
    position: absolute;
    right: 0.8rem;
    top: 9.8rem;
    width: 2.5rem;
    height: 1.1rem;
  }

  .middle_science {
    position: absolute;
    width: 2.5rem;
    height: 1.1rem;
    right: 0.8rem;
    top: 12rem;
  }

  .high_chinese {
    left: 0.8rem;
    top: 16rem;
    position: absolute;
    width: 2.5rem;
    height: 1.1rem;
  }

  .high_math {
    position: absolute;
    top: 16rem;
    right: 0.8rem;
    width: 2.5rem;
    height: 1.1rem;
  }
}
</style>